<template>
  <div class="fu-channel">
    <el-row>
      <ul style="line-height: 2;" class="fz12">
        <li>经营地址：{{ date.area }}</li>
        <li>详细地址：{{ date.address }}</li>
        <li>商户类别：{{ date.industry }}</li>
        <li>渠道选择：{{ date.balance_type }}</li>
        <li>D+0到账：{{ date.d0_cash ? '已开通' : '未开通' }}</li>
        <li><span style="vertical-align: top;">证件信息：</span>
          <img v-if="date.photo.channel_starpos_agreement" :src="date.photo.channel_starpos_agreement" width="100" height="100" class="mr20" title="商户协议" @click="handleClickZoomImg(date.photo.channel_starpos_agreement)">
          <img v-if="date.photo.channel_starpos_mch_info" :src="date.photo.channel_starpos_mch_info" width="100" height="100" class="mr20" title="商户信息表" @click="handleClickZoomImg(date.photo.channel_starpos_mch_info)">
          <img v-if="date.photo.channel_starpos_stofc_payee" :src="date.photo.channel_starpos_stofc_payee" width="100" height="100" class="mr20" title="结算人站门头照" @click="handleClickZoomImg(date.photo.channel_starpos_stofc_payee)">
          <img v-if="date.photo.ch_spos_certi" :src="date.photo.ch_spos_certi" width="100" height="100" class="mr20" title="协议书" @click="handleClickZoomImg(date.photo.ch_spos_certi)">
          <img v-if="date.photo.ch_spos_certi_inhand" :src="date.photo.ch_spos_certi_inhand" width="100" height="100" class="mr20" title="授权协议手持合照" @click="handleClickZoomImg(date.photo.ch_spos_certi_inhand)">
        </li>
        <li v-if="date.card_type"><h4>POS机</h4></li>
        <li v-if="date.card_type">借记卡费率：{{ date.debit }} %</li>
        <li v-if="date.card_type">封顶金额：{{ date.pos_debit_max }} 元</li>
        <li v-if="date.card_type">贷记卡费率：{{ date.credit }} %</li>
        <li v-if="date.card_type">支持双免：{{ date.is_supt_dbfree_flg ? '已开通' : '未开通' }}</li>
        <li v-if="date.card_type">支持卡种：<span v-for="item in date.support_card" :key="item">{{ item === 1 ? '借记卡，' : item === 0 ? '贷记卡': '无' }}</span></li>
        <li v-if="date.card_type">交易类型：<span v-for="item in date.tran_types.code" :key="item">{{ item === 'C1' ? '消费，' : item === 'C2' ? '消费撤销，' : item === 'C3' ? '预授权，' : item === 'C4' ? '预授权完成，' : item === 'C5' ? '预授权完成撤销，' : item === 'C6' ? '预授权撤销，' : item === 'C7' ? '余额查询' : '' }}</span></li>
        <li v-if="date.card_type">终端数量：{{ date.trm_num }}</li>
        <li><h4>移动支付</h4></li>
        <li>移动支付签约费率：{{ date.scan }}%<span class="err">（支付宝、微信）</span></li>
        <li>银联二维码标准费率：{{ date.unionpay_sta }}%<span class="err">（收款金额≥1000元）</span></li>
        <li>银联二维码优惠费率：{{ date.unionpay_dis }}%<span class="err">（收款金额&lt;1000元）</span></li>
      </ul>
    </el-row>
    <el-row>
      <el-col :span="23" :offset="1">
        <el-button type="primary" size="small" @click="handleClickOnSubmit(200)">通过并提交审核</el-button>
        <el-button type="danger" size="small" @click="handleClickOnSubmit(-200)">不通过</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { verfiryChannelMainlandValid, verfiryChannelMainlandQuery } from '@/api/shop'

export default {
  data() {
    return {
      date: {
        card_type: false,
        area: '',
        address: '',
        industry: '',
        balance_type: '',
        d0_cash: '',
        credit: '',
        pos_debit_max: '',
        debit: '',
        is_supt_dbfree_flg: '',
        support_card: [],
        tran_types: [],
        trm_num: '',
        photo: {},
        scan: '',
        unionpay_dis: '',
        unionpay_sta: '',
        channel_status: null
      }
    }
  },
  created() {
    this.handleDocumentInit()
  },
  methods: {
    handleDocumentInit() {
      verfiryChannelMainlandQuery(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.date.area = res.data.result.area.name.toString()
          this.date.address = res.data.result.address
          this.date.industry = res.data.result.industry
          this.date.balance_type = res.data.result.balance_type
          this.date.d0_cash = res.data.result.d0_cash
          this.date.credit = res.data.result.credit
          this.date.pos_debit_max = res.data.result.pos_debit_max
          this.date.debit = res.data.result.debit
          this.date.is_supt_dbfree_flg = res.data.result.is_supt_dbfree_flg
          this.date.support_card = res.data.result.support_card
          this.date.tran_types = res.data.result.tran_types
          this.date.trm_num = res.data.result.trm_num
          this.date.photo = res.data.result.photo
          this.date.scan = res.data.result.scan
          this.date.unionpay_dis = res.data.result.unionpay_dis
          this.date.unionpay_sta = res.data.result.unionpay_sta
          res.data.result.card_type === 1 ? this.date.card_type = false : res.data.result.card_type === 3 ? this.date.card_type = true : ''
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleClickOnSubmit(status) {
      if (status === -200) {
        this.$msgbox({
          title: '拒绝原因',
          showInput: true,
          inputType: 'textarea',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: true
        }).then(({ value }) => {
          verfiryChannelMainlandValid(this.$route.query.id, status, value).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.$emit('update')
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }).catch(() => {
          return false
        })
      } else {
        verfiryChannelMainlandValid(this.$route.query.id, status).then(res => {
          if (res.data.errorCode === 0) {
            this.$message.success(res.data.errorMsg)
            this.$emit('update')
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
      }
    },
    handleClickZoomImg(url) {
      this.$alert(`<img width="100%" heigth="100%" src= ${url}></img>`, {
        dangerouslyUseHTMLString: true,
        center: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        closeOnPressEscape: true
      }).then(() => {
        return false
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
